<template>
  <div class="home hide-scroller-bar">
    <div class="content">
      <a-row :wrap="false" justify="space-between">
        <a-col class="title-left">
          <div style="letter-spacing: 2px">
            <div>基于知识库训练<span class="ai-text">AI</span>机器人</div>
            <div style="font-size: 28px; margin-top: 10px">
              上传企业文档，快速训练符合企业要求的<text>AI</text>机器人
            </div>
          </div>
          <div class="title-left-sub">
            让每个企业轻松有用自己的AIGC系统和企业级AI平台,实现智能对话、
            AI模型训练 、AI客服、AI虚拟员工、AI学习平台，大幅降低企业成本
            提高企业效率
          </div>
          <div class="btn">
            <a-space :size="40">
              <a-button
                type="primary"
                shape="round"
                size="large"
                class="btn-left"
                @click="toTrainingSetting"
                >一分钟搭建您的专属AI</a-button
              >
              <a-button
                type="primary"
                shape="round"
                size="large"
                class="btn-right"
                @click="toTrainingSetting"
                >管理我的专属AI
              </a-button>
            </a-space>
          </div>
        </a-col>
        <a-col class="image">
          <img
            :src="$utils.staticPath + `images/workAi/user_pc/aiAiTrain.png`"
          />
        </a-col>
      </a-row>
      <a-row class="card-row">
        <a-col
          :span="8"
          v-for="(item, index) in cardList"
          :key="index"
          class="card-wrap"
        >
          <a-card class="card-item">
            <a-row style="align-items: center">
              <a-col>
                <img :src="item.img" />
              </a-col>
              <a-col class="title">
                {{ item.title }}
              </a-col>
            </a-row>
            <div class="card-content">
              {{ item.content }}
            </div>
            <div class="desc">
              <div
                class="card-bottom"
                v-for="(card, cardIndex) in item.list"
                :key="cardIndex"
              >
                <div class="icon"><CheckOutlined /></div>
                <div class="txt">{{ card.title }}</div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 切换团队、企业 -->
    <a-modal
      :title="'选择' + (showMemberBusiness ? '企业' : '团队')"
      :width="500"
      :visible="showMemberVisible"
      @cancel="showMemberVisible = false"
      :footer="false"
      centered
      :zIndex="1002"
    >
      <team-slider
        @addTeam="addTeamCallback"
        :team="showMemberTeam"
        :business="showMemberBusiness"
        height="400px"
        @change="onTeamChange"
      ></team-slider>
    </a-modal>

    <AddTeam
      :visible="addTeamVisible"
      @onClose="addTeamVisible = false"
      @success="addTeamSuccess"
    />

    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs, defineComponent } from "vue";
import { CheckOutlined } from "@ant-design/icons-vue";
import utils from "../../common/utils/utils";
import { useRoute, useRouter } from "vue-router";
import AddTeam from "../../components/AddTeam/index.vue";
import TeamSlider from "@/components/TeamSlider/index.vue";
import store from "../../store/index";
import { useTeamId } from "../../hooks/team";
import request from "../../common/utils/request";

export default defineComponent({
  name: "aiTrain",
  components: { CheckOutlined, TeamSlider, AddTeam },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const [teamId] = useTeamId();

    const state = reactive({
      count: 0,
      cardList: [
        {
          img: utils.staticPath + "images/workAi/user_pc/service.png",
          title: "AI+客服",
          content:
            "智能化管理企业海量文档和数据，让企业所有 知识可查询、可应用，基于知识库使用AI实现 企业智能化客服",
          list: [
            {
              title: "降低企业客服成本",
            },
            {
              title: "7*24小时在线，快速响应",
            },
            {
              title: "连接知识库实时回答",
            },
          ],
        },
        {
          img: utils.staticPath + "images/workAi/user_pc/book.png",
          title: "AI+企业知识库",
          content:
            "通过AI 智能机器人建立企业内部知识库，并通过聊天对话模式快速查阅和各种内部资料和文档",
          list: [
            {
              title: "多维度知识文档接入",
            },
            {
              title: "AI自动学习",
            },
            {
              title: "员工随时随地智能搜索",
            },
          ],
        },
        {
          img: utils.staticPath + "images/workAi/user_pc/people.png",
          title: "AI+人力资源",
          content:
            "通过AI 智能机器人建立企业入职流程和日常管理条例，撰写通知、整理管理、绩效规则等相关内容",
          list: [
            {
              title: "入职指引和AI问题解答",
            },
            {
              title: "绩效考核，公司福利、社保等相关知识",
            },
            {
              title: "报销制度、差旅津贴、合同发票等知识",
            },
          ],
        },
        {
          img: utils.staticPath + "images/workAi/user_pc/legalAffairs.png",
          title: "AI+法务",
          content:
            "利用AI对话机器人实现企业内部的法务助手功能，减少法律风险，降低法务成木",
          list: [
            {
              title: "接入法律法规文档",
            },
            {
              title: "AI自助学习",
            },
            {
              title: "员工随时随地查询",
            },
          ],
        },
        {
          img: utils.staticPath + "images/workAi/user_pc/sale.png",
          title: "AI+销售",
          content:
            "通过聊天机器人，为销售提供更适合的销售话术、客户方案，提高销售人效",
          list: [
            {
              title: "基于产品知识生成销售话术",
            },
            {
              title: "撰写名类客户方案、标书",
            },
            {
              title: "撰写朋友圈文案、群发文案",
            },
          ],
        },
        {
          img: utils.staticPath + "images/workAi/user_pc/marketing.png",
          title: "AI+营销",
          content: "利用AI机器人生成朋友圈文案 SEO文章自媒体内容和各类营销文案",
          list: [
            {
              title: "提高创作效率，减少人力成本",
            },
            {
              title: "营销内容自动化生产",
            },
            {
              title: "搜索引擎优化",
            },
          ],
        },
      ],
      addTeamVisible: false,
      loginVisible: false,
      showMemberVisible: false,
      isBusiness: 0,
      showMemberTeam: true,
      showMemberBusiness: true,
    });

    const toTrainingSetting = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }

        if (store.state.user.teamId) {
          router.push({
            name: "TrainingSetting",
          });
        } else {
          state.showMemberVisible = true;
        }
      });
    };

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const addTeamCallback = (is_business) => {
      state.addTeamVisible = true;
      state.isBusiness = is_business;
    };

    const onTeamChange = (team) => {
      state.showMemberVisible = false;
      router.push({
        name: "TrainingSetting",
      });
    };

    const addTeamSuccess = () => {
      state.addTeamVisible = false;
    };

    const pluginList = ref([]);

    const getPluginList = async () => {
      let { list: plugins } = await request.get("/work_ai", "/plugin/list", {});

      plugins.forEach((plugin) => {
        plugin.type = "plugin";
        plugin.path = `/chatModel/plugin/${plugin.id}`;
      });

      pluginList.value = plugins;
    };

    const initData = async () => {
      if (teamId.value) {
        await getPluginList();

        if (pluginList.value.length > 0) {
          router.push("/training/setting/appList");
        }
      }
    };

    initData();

    return {
      ...toRefs(state),
      toTrainingSetting,
      loginCallback,
      addTeamCallback,
      onTeamChange,
      addTeamSuccess,
    };
  },
});
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  background-image: url(../home/home_bg.png);
  .content {
    width: 100%;
    min-width: 1058px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    .title-left {
      font-size: 45px;
      font-family: PingFang SC;
      font-weight: 700;
      color: #000000;
      padding-top: 20px;
      .ai-text {
        // padding: 0 5px;
        font-weight: 700;
        color: rgb(255, 101, 98);
        line-height: 60px;
        background: linear-gradient(
          47deg,
          #6554ff 0%,
          #f26dbe 57.0068359375%,
          #febd7f 91.357421875%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      text {
        color: rgb(255, 101, 98);
      }
      .title-left-sub {
        font-size: 17px;
        width: 640px;
        margin-top: 22px;
        font-weight: 500;
        line-height: 36px;
      }
      .btn {
        margin-top: 30px;
        .btn-left {
          background: linear-gradient(90deg, rgb(255, 101, 98), #7d9dfc);
          border: none;
        }
        .btn-right {
          width: 198px;
          background: #fff;
          color: #7b48fc;
        }
      }
    }
    .image {
      width: 480px;
      height: 380px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .card-row {
      margin-top: 60px;
      .card-wrap {
        padding: 12px;
        .card-item {
          border-radius: 10px;

          :deep(.ant-card-body) {
            padding: 40px 28px;
          }
          .title {
            margin-left: 10px;
            font-weight: 600;
            font-size: 18px;
            color: #000;
          }
          .card-content {
            margin-top: 20px;
            color: #676767;
            font-size: 16px;
            line-height: 28px;
          }
          .desc {
            color: #999999;
            margin-top: 40px;

            .card-bottom {
              margin-bottom: 15px;
              display: flex;
              align-items: center;
              .txt {
                font-size: 15px;
              }

              .icon {
                width: 20px;
                height: 20px;
                border-radius: 20px;
                color: #8454fc;
                background: #ebe3ff;
                font-size: 12px;
                margin-right: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }

        &:nth-child(3n + 1) {
          padding-left: 0 !important;
        }

        &:nth-child(3n + 3) {
          padding-right: 0 !important;
        }
      }
    }
  }
}
</style>
